<template>
  <el-tooltip :content="action.title" :placement="placement" :enterable="false">
    <el-button class="tool-button can-hover" type="text" @click="() => onClick(action.path)">
      <!-- <i v-if="action.icon" :class="`fa fa-${action.icon}`" />
      <i v-if="action.iconEle" :class="`el-icon-${action.iconEle}`" />
      <svg-icon v-if="action.iconSvg" :icon-class="action.iconSvg" />-->
      <i v-if="action.icon" :class="_iconClass" />
      <i v-if="action.iconEle" :class="_iconEleClass" />
      <svg-icon v-if="action.iconSvg" :icon-class="_iconSvgClass" />
    </el-button>
  </el-tooltip>
</template>

<script>
import ActionDispatcher from '../../actions/dispatcher'

export default {
  components: {},
  mixins: [ActionDispatcher],
  props: {
    placement: {
      type: String,
      required: false,
      default: 'top'
    },
    action: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      index1: -1,
      index2: -1,
      index3: -1,
      iconClass: null,
      iconArray: null,
      iconEleClass: null,
      iconEleArray: null,
      iconSvgClass: null,
      iconSvgArray: null
    }
  },
  computed: {
    _iconClass() {
      if (this.index1 < 0) {
        return this.iconClass
      } else {
        return this.iconArray[this.index1]
      }
    },
    _iconEleClass() {
      if (this.index2 < 0) {
        return this._iconEleClass
      } else {
        return this.iconEleArray[this.index2]
      }
    },
    _iconSvgClass() {
      if (this.index3 < 0) {
        return this.iconSvgClass
      } else {
        return this.iconSvgArray[this.index3]
      }
    }
  },
  created() {
    const getClass = (obj) => Object.prototype.toString.call(obj).slice(8, -1)
    const action = this.action
    // console.log('xxxxxxxxx:', action)
    if (action.icon) {
      if (typeof action.icon === 'string') {
        this.iconClass = `fa fa-${action.icon}`
        this.index1 = -1
      } else if (getClass(action.icon) === 'Array') {
        this.index = 0
        this.iconArray = action.icon
      }
    } else if (action.iconEle) {
      if (typeof action.iconEle === 'string') {
        this.iconEleClass = `el-icon-${action.iconEle}`
        this.index2 = -1
      } else if (getClass(action.icon) === 'Array') {
        this.index = 0
        this.iconEleArray = action.iconEle
      }
    } else if (action.iconSvg) {
      if (typeof action.iconSvg === 'string') {
        this.iconSvgClass = action.iconSvg
        this.index = -1
      } else if (getClass(action.iconSvg) === 'Array') {
        this.index3 = 0
        this.iconSvgArray = action.iconSvg
      }
    }
  },
  methods: {
    onClick(path) {
      if (this.index1 > -1) {
        this.index1 = (this.index1 + 1) % this.iconArray.length
      } else if (this.index2 > -1) {
        this.index2 = (this.index2 + 1) % this.iconEleArray.length
      } else if (this.index3 > -1) {
        this.index3 = (this.index3 + 1) % this.iconSvgArray.length
      }
      console.log(path)
      // 执行action
      this.onAction(path)
    }
  }
}
</script>
